(ns ura.login
  (:require
   [reagent.core :as r]
   [reagent.dom :as rd]
   [stylefy.core :as sty]
   [stylefy.reagent :as stylefy-reagent]
   [ura.common :as uc :refer [log]]

   [ura.style :refer [attr]]

   [devtools.core :as devtools]
   ["antd" :as ant]
   ))


;; 定义一个原子来存储表单数据
(def form-data (r/atom {:username "" :password ""}))

;; 处理表单提交的函数
(defn handle-submit [e]
  (.preventDefault e)
  (let [{:keys [username password]} @form-data]
    (js/alert (str "Username: " username ", Password: " password))))

;; 登录表单组件
(defn login-form []
  [:form {:on-submit handle-submit}
   [:div (attr :w=300px :bg=white :m=12 :p=12 :rounded=5 :shadow=12)
    [:label "用户名："]
    [:input (attr :w=100% :py=2 :px=3
                  {:type "text"
                   :value (:username @form-data)
                   :on-change #(swap! form-data assoc :username (-> % .-target .-value))
                   })]
    
   [:div 
    [:label  "密码："]
    [:input (attr :w=100% :py=2 :px=3 :mb=3
                  {:type "password"
                   :value (:password @form-data)
                   :on-change #(swap! form-data assoc :password (-> % .-target .-value))
                   }) ]
    [:div (attr :flex :jc-c :w=100%)
     [:> ant/Button (attr {:type "primary"}) "登陆"]
     ]
    ]]
   ])

(defn loginPage []
  [:div
   [:img (attr :position=absolute :z-index=0 :w=100vw :h=100vh {:src "/img/bg.jpg"})]
   [:div (attr :position=absolute :z-index=10 :flex :justify-content=center :align-items=center :min-height=100vh :min-width=100vw)
    [login-form]
    ]
   ]
  )

